<template>
	<view>
		<view class="top_bar" :animation='animationData' >
			<view @click="backLogin" class="top_bar_left">
				<image src="../../static/fh.png" mode=""></image>
			</view>
			<view class="top_bar_center">
				<!-- <text>详情</text> -->
			</view>
			<view @click="toPushMoment" class="top_bar_right">
				<image src="../../static/three.png" mode=""></image>
			</view>
		</view>
		<view class="bg">
			<image :src="userinfo.userimg" mode="widthFix"></image>
		</view>
		<view class="main-wrap">
			<view class="user-data">
				<view class="user-wrap">
					<image :src="userinfo.userimg" mode="heightFix"></image>
					<view class="name">{{ userinfo.username }}</view>
				</view>
				<view class="weather">
					<image src="../../static/weather/7962/e3.png" mode="heightFix"></image>
					<view class="wweather-data">
						<view class="num">21~29℃</view>
						<view class="address">佛山</view>
					</view>
				</view>
			</view>
			<view class="items">
				<view class="user-item" v-for="item,index in moment" :key='index' >
					<view class="user-image">
						<image :src="item.userimg" mode=""></image>
					</view>
					<view class="user-main">
						<view class="name">{{ item.username }}</view>
						<view class="data">{{ item.data }}</view>
						<view class="image-data">
							<view class="image-item" v-for='item2,index2 in item.images'>
								<image :src="item2.image" mode=""></image>
							</view>
						</view>
						<view class="date-wrap">
							<view class="date">刚刚</view>
							<view class="option"></view>
						</view>
						<view class="comment">
							<view class="dz-item">
								李华
							</view>
							<view class="dz-item">
								小米
							</view>
							<view class="pl-item" v-for="item1,index1 in item.pl_data" :key='index1'>
								<view class="author">{{ item1.user }}</view>
								<view class="author-data">{{ item1.data }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utails/request.js'
	
	export default {
		data() {
			return {
				userinfo:{},
				moment:[], // 朋友圈数据
				isuser:false, // 是否为用户动态界面
				barTop:0,
				animationData:{}
			}
		},
		comments:{
			
		},
		onLoad(e) {
			if(e.types=='user'){
				this.isuser=true
			}else{
				this.isuser=false
			}
			this.getMomentData()
		},
		onPageScroll() {
			this.getElementStyle()
			this.scroolBar()
		},
		methods: {
			// 获取朋友圈数据
			async getMomentData(){
				this.userinfo = uni.getStorageSync('userinfo')
				let url = ''
				if(this.isuser){
					url='/usermoment/'
				}else{
					url='/moment_view/'
				}
				let res = await request.request({url,data:{userid:this.userinfo.id}})
				this.moment = res
			},
			
			
			// 获取主体与头部是距离
			getElementStyle(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.main-wrap').boundingClientRect(data => {
				  this.barTop = data.top
				  // console.log(this.barTop)
				}).exec();
			},
			// 动画
			scroolBar(){
				var animation = uni.createAnimation({
					duration: 500,
				    timingFunction: 'ease',
				})
				clearTimeout(this.animationDataTime)
				this.animationDataTime = setTimeout(()=>{
				  if(this.barTop < 40){
					  animation.opacity(1).step()
				  }else{
					  animation.opacity(0).step()
				  }
				  this.animationData = animation.export()
				}, 200)
				
			},
			
			// 发朋友圈
			toPushMoment(){
				uni.navigateTo({
					url:'../pushmoment/pushmoment'
				})
			},
			
			// 返回上一页
			backLogin(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	
	/* 朋友圈楼层 */
	.items{
		margin-top: 140rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx 50rpx;
	}
	
	.items .user-item{
		padding: 30rpx 0;
		flex: 1;
	}
	.user-image{
		float: left;
	}
	.user-image image{
		width: 90rpx;
		height: 90rpx;
	}
	.user-main{
		float: left;
		width: calc(100vw - 250rpx) ;
		padding: 20rpx 20rpx;
	}
	
	
	/* @wi:calc(100vw - 250rpx) */
	
	.user-main .name{
		font-size: 34;
		color: #444444;
	}
	.user-main .data{
		color: #70706d;
	}
	
	.image-data{
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		
	}
	
	.image-data .image-item{
		padding: 3rpx;
	}
	
	.image-data .image-item image{
		width: 160rpx;
		height: 160rpx;
	}
	
	.date-wrap{
		height: 30rpx;
		width: calc(100vw - 250rpx) ;
	}
	.date-wrap .date{
		float: left;
		color: #737373;
		font-size: 24rpx;
	}
	
	.comment{
		width: calc(100vw - 250rpx) ;
		height: 100%;
	}
	.comment .dz-item{
		font-size: 26rpx;
		float: left;
		padding: 5rpx 8rpx;
		color:#f4ea2a;
	}
	
	.comment .pl-item{
		float: left;
		width: calc(100vw - 250rpx) ;
		height: 40rpx;
	}
	.comment .pl-item .author{
		padding-left: 25rpx;
		float: left;
		font-size: 26rpx;
		color: #f4ea2a;
	}
	.comment .pl-item .author-data{
		padding: 0 10rpx;
		float: left;
		font-size: 26rpx;
	}
	
	
	
	
	.top_bar{
		background: rgba(255,255,255,0.96);
		border-bottom:1rpx solid #b5b5b5;
	}
	
	
	/* 顶部背景 */
	.bg{
		position: fixed;
		width: 100vw;
		z-index: -1;
	}
	.bg image{
		width: 100vw;
	}
	.main-wrap{
		position: absolute;
		top: 35vh;
		width: 100%;
		background-color: #fff;
		z-index: 1;
		border-radius: 40rpx;
	}
	.user-data{
		position: absolute;
		top:-110rpx;
		padding: 0 20rpx;
		width: calc(100vw - 40rpx);
	}
	.user-data .user-wrap{
		float: left;
	}
	
	.user-data .user-wrap .name{
		padding-top: 50rpx;
		padding-left: 30rpx;
		float: left;
		color: white;
		font-size: 40rpx;
		font-weight: 600;
	}
	.user-data .user-wrap image{
		float: left;
		height: 160rpx;
	}
	
	.user-data .weather{
		padding-top: 20rpx;
		float: right;
		width: 240rpx;
	}
	
	.user-data .weather image{
		float: left;
		height: 80rpx;
	}
	.user-data .weather .wweather-data{
		float: left;
		color: white;
	}
	
	
	
</style>
